export interface CXYPoint {
  x: number,
  y: number
}

export function useCanvasDraw () {
  //绘制文字，pt为绘制起点
  const drawText = (ctx: CanvasRenderingContext2D, pt: CXYPoint,
    text: string, fontSize: number, fontColor: string) => {
    if (ctx) {
      ctx.globalAlpha = 1;
      ctx.font = fontSize.toString() + 'px Microsoft Yahei' || '15px Arial';
      ctx.fillStyle = fontColor || 'black';
      ctx.fillText(text, pt.x, pt.y);
    }
  };

  //画线， pt为划线起点
  const drawLine = (ctx: CanvasRenderingContext2D, pt0: CXYPoint, pt1: CXYPoint,
    lineWidth: number, lineColor: string) => {
    if (ctx) {
      ctx.beginPath(); // 定义了一个新的路径绘制动作的开始
      ctx.moveTo(pt0.x, pt0.y); //设置起点状态
      ctx.lineTo(pt1.x, pt1.y); //设置末端状态

      ctx.globalAlpha = 1;
      ctx.lineWidth = lineWidth || 1; //设置线宽状态
      ctx.strokeStyle = lineColor || '#000000';  //绘制线颜色
      ctx.stroke();  //绘制线
    }
  };

  //画箭头函数，pt0为线起点，pt1为线终点
  const drawLineArrow = (ctx: CanvasRenderingContext2D, pt0: CXYPoint,
    pt1: CXYPoint, lineWidth: number, lineColor: string) => {
    // get context for drawing
    if (ctx) {
      let arrowLen = 15;//自定义箭头线的长度
      let theta = 30;//自定义箭头线与直线的夹角，个人觉得45°刚刚好

      // 计算各角度和对应的箭头终点坐标
      let angle = Math.atan2(pt0.y - pt1.y, pt0.x - pt1.x) * 180 / Math.PI;
      let angle1 = (angle + theta) * Math.PI / 180;
      let angle2 = (angle - theta) * Math.PI / 180;
      let topX = arrowLen * Math.cos(angle1);
      let topY = arrowLen * Math.sin(angle1);
      let botX = arrowLen * Math.cos(angle2);
      let botY = arrowLen * Math.sin(angle2);
      ctx.beginPath();
      let arrowX = pt0.x - topX;
      let arrowY = pt0.y - topY;
      ctx.moveTo(arrowX, arrowY);

      //画直线
      ctx.moveTo(pt0.x, pt0.y);
      ctx.lineTo(pt1.x, pt1.y);

      //画上箭头
      arrowX = pt1.x + topX;
      arrowY = pt1.y + topY;
      ctx.moveTo(arrowX, arrowY);
      ctx.lineTo(pt1.x, pt1.y);

      //画下箭头
      arrowX = pt1.x + botX;
      arrowY = pt1.y + botY;
      ctx.lineTo(arrowX, arrowY);

      ctx.globalAlpha = 1;
      ctx.strokeStyle = lineColor || '#000000';  //绘制线颜色
      ctx.lineWidth = lineWidth || 1;
      ctx.stroke();  //绘制线
    }
  };

  //画三角形，等腰三角形，pt中心坐标
  const drawTriangle = (ctx: CanvasRenderingContext2D, pt: CXYPoint, w: number, h: number,
    lineWidth: number, lineColor: string, fillColor: string) => {
    // get context for drawing
    if ((ctx) && (pt.x >= w / 2) && (pt.y >= h / 2)) {
      ctx.beginPath();

      //移动到初始坐标
      ctx.moveTo(pt.x, pt.y - h / 2);

      //计算坐标
      ctx.lineTo(pt.x - w / 2, pt.y + h / 2);
      ctx.lineTo(pt.x + w / 2, pt.y + h / 2);
      ctx.lineTo(pt.x, pt.y - h / 2);
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();  //绘制线
    }
  };

  //画带圆角矩形，pt为矩形左上定点，radius倒角半径
  const drawRoundRect = (ctx: CanvasRenderingContext2D, pt: CXYPoint, w: number, h: number,
    cx: number, cy: number, lineWidth: number, lineColor: string, fillColor: string) => {
    // get context for drawing
    if (ctx) {
      ctx.save();
      ctx.beginPath();

      ctx.moveTo(pt.x, pt.y + cy);
      ctx.lineTo(pt.x, pt.y + h - cy);
      ctx.quadraticCurveTo(pt.x, pt.y + h, pt.x + cx, pt.y + h);
      ctx.lineTo(pt.x + w - cx, pt.y + h);
      ctx.quadraticCurveTo(pt.x + w, pt.y + h, pt.x + w, pt.y + h - cy);
      ctx.lineTo(pt.x + w, pt.y + cy);
      ctx.quadraticCurveTo(pt.x + w, pt.y, pt.x + w - cx, pt.y);
      ctx.lineTo(pt.x + cx, pt.y);
      ctx.quadraticCurveTo(pt.x, pt.y, pt.x, pt.y + cy);
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();  //绘制线
    }
  };

  //清除矩形区域，pt为矩形左上定点，
  const clearRect = (ctx: CanvasRenderingContext2D, pt: CXYPoint, w: number, h: number, fillColor: string) => {
    // get context for drawing
    if (ctx) {
      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'white';
      ctx.clearRect(pt.x, pt.y, w, h);
    }
  }

  //画圆， pt为圆中心
  const drawCircle = (ctx: CanvasRenderingContext2D, pt: CXYPoint, radius: number,
    lineWidth: number, lineColor: string, fillColor: string) => {
    // get context for drawing
    if (ctx) {
      ctx.beginPath(); //新开启路径
      ctx.arc(pt.x, pt.y, radius, 0, 2 * Math.PI, false);//在canvas中绘制圆形
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();  //绘制线
    }
  };

  //画双圆， pt为圆中心
  const drawDoubleCircle = (ctx: CanvasRenderingContext2D, pt: CXYPoint, r1: number, r2: number,
    lineWidth: number, lineColor: string, fillColor: string) => {
    // get context for drawing
    if (ctx) {
      //新开启路径
      ctx.beginPath();
      ctx.arc(pt.x, pt.y, r1, 0, 2 * Math.PI, false);//在canvas中绘制圆形
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      //绘制线
      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();

      //新开启路径
      ctx.beginPath();
      ctx.arc(pt.x, pt.y, r2, 0, 2 * Math.PI, false);//在canvas中绘制圆形
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();  //绘制线
    }
  };

  //画椭圆, pt为椭圆中心
  const drawEllipse = (ctx: CanvasRenderingContext2D, pt: CXYPoint, rx: number, ry: number,
    lineWidth: number, lineColor: string, fillColor: string) => {
    if (ctx) {
      //定义椭圆中心
      let step = (rx > ry) ? 1 / rx : 1 / ry;

      //新开启路径
      ctx.beginPath();
      ctx.moveTo(pt.x + rx, pt.y);
      for (let i = 0; i < 2 * Math.PI; i += step) {
        ctx.lineTo(pt.x + rx * Math.cos(i), pt.y + ry * Math.sin(i));
      }
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();  //绘制线
    }
  }

  //画正多边形， pt为正变形中心
  const drawEqualSidesPolygon = (ctx: CanvasRenderingContext2D, pt: CXYPoint, sides: number,
    radius: number, lineWidth: number, lineColor: string, fillColor: string) => {
    if ((ctx) && (sides >= 3)) {
      //多边形坐标集合
      let pointArr: CXYPoint[] = [];

      //计算坐标
      for (let i = 0; i < sides; i++) {
        pointArr.push({
          x: pt.x + radius * Math.cos(2 * Math.PI * i / sides),
          y: pt.y + radius * Math.sin(2 * Math.PI * i / sides)
        });
      }

      //新开启路径
      ctx.beginPath();
      ctx.moveTo(pointArr[0].x, pointArr[0].y);
      for (let i = 1; i < sides; i++) {
        ctx.lineTo(pointArr[i].x, pointArr[i].y);
      }
      ctx.lineTo(pointArr[0].x, pointArr[0].y);
      ctx.closePath();

      ctx.globalAlpha = 1;
      ctx.fillStyle = fillColor || 'transparent';
      ctx.fill();

      ctx.globalAlpha = 1;
      ctx.strokeStyle = lineColor || 'black';  //绘制线颜色
      ctx.lineWidth = lineWidth;
      ctx.stroke();  //绘制线
    }
  }

  //绘image图
  const drawImage = (ctx: CanvasRenderingContext2D, pt: CXYPoint, imgURL: string,
    w: number, h: number) => {
    if (ctx) {
      let image = new Image();
      image.src = imgURL;
      ctx.drawImage(image, pt.x, pt.y, w, h);
    }
  }

  return {
    drawText,
    drawLine,
    drawLineArrow,
    drawTriangle,
    drawRoundRect,
    clearRect,
    drawCircle,
    drawEllipse,
    drawDoubleCircle,
    drawEqualSidesPolygon,
    drawImage
  };
}
